<template>
  <div></div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min'

export default {
  name: 'ThirteenThree',
  data() {
    return {
      ring: null,                   // 圆环对象
    }
  },
  mounted() {
    this.initScene();
    this.initCamera();
    this.initRenderer();
    this.addRingGeometry(3, 4, 8, 8, 0, Math.PI * 2);
    this.addOrbitControls();
    this.animation();
    this.initControl();
  },
  methods: {
    // 初始化场景
    initScene() {
      this.scene = new THREE.Scene();
    },
    // 初始化相机
    initCamera() {
      // 创建一个相机 视点
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      // 设置相机的位置
      this.camera.position.x = 0;
      this.camera.position.y = 0;
      this.camera.position.z = 10;
      this.camera.lookAt(0, 0, 0);
    },
    // 初始化渲染器
    initRenderer() {
      // 创建一个渲染器
      this.renderer = new THREE.WebGLRenderer();
      // 设置渲染器尺寸
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);
    },
    // 添加一个圆环
    addRingGeometry(innerRadius = 0.5, outerRadius = 1, thetaSegments = 32, phiSegments = 8, thetaStart = 0, thetaLength = Math.PI * 2) {
      const ringGeometry = new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength);
      const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff });
      ringMaterial.side = THREE.DoubleSide;
      ringMaterial.wireframe = true;
      this.ring = new THREE.Mesh(ringGeometry, ringMaterial);
      this.scene.add(this.ring);
    },
    // 添加轨道控制器
    addOrbitControls() {
      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
      // 设置带阻尼的惯性
      this.orbitControls.enableDamping = true;
      // 设置阻尼系数
      this.orbitControls.dampingFactor = 0.05;
    },
    // 动画函数
    animation() {
      this.orbitControls.update();
      // 渲染
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animation);
    },
    // 初始化lil.gui调试工具
    initControl() {
      const gui = new GUI();

      const params = {
        innerRadius: this.ring.geometry.parameters.innerRadius,
        outerRadius: this.ring.geometry.parameters.outerRadius,
        thetaSegments: this.ring.geometry.parameters.thetaSegments,
        phiSegments: this.ring.geometry.parameters.phiSegments,
        thetaStart: this.ring.geometry.parameters.thetaStart,
        thetaLength: this.ring.geometry.parameters.thetaLength,
      }

      let folder = gui.addFolder('圆环属性');
      folder.add(params, 'innerRadius', 1, 10).step(0.1).name('innerRadius-内半径').onChange(innerRadius => {
        params.innerRadius = innerRadius;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      });
      folder.add(params, 'outerRadius', 1, 10).step(0.1).name('outerRadius-外半径').onChange(outerRadius => {
        params.outerRadius = outerRadius;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      })
      folder.add(params, 'thetaSegments', 3, 40).step(1).name('thetaSegments-分段数').onChange(thetaSegments => {
        params.thetaSegments = thetaSegments;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      });
      folder.add(params, 'phiSegments', 1, 20).step(1).name('phiSegments-线段数量').onChange(phiSegments => {
        params.phiSegments = phiSegments;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      })
      folder.add(params, 'thetaStart', 0, 5).step(0.1).name('thetaStart-起始角度').onChange(thetaStart => {
        params.thetaStart = thetaStart;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      });
      folder.add(params, 'thetaLength', 0, Math.PI * 2).step(0.1).name('thetaLength-圆心角').onChange(thetaLength => {
        params.thetaLength = thetaLength;
        this.scene.remove(this.ring);
        this.addRingGeometry(params.innerRadius, params.outerRadius, params.thetaSegments, params.phiSegments, params.thetaStart, params.thetaLength);
      })
    }
  }
}
</script>

<style scoped>

</style>
